{{define "title"}}账户余额 {{end}}
{{define "seo"}}<meta name="keywords" content="{{.setting.SeoKeywords}}">
<meta name="description" content="{{.setting.SeoDescription}}">{{end}}
{{define "content"}}
<div class="row">
    <div class="col-md-9 col-sm-6">
        <div class="sep20"></div>
        
        <div style="border-bottom: 1px solid #e2e2e2;">
            <div class="pull-right" style="margin-top: 8px;">
                <a href="/top/rich" class="tab">社区财富排行榜</a>
                <a href="/gift" class="tab">物品兑换</a>
                <a href="/balance/add" class="tab">充值</a>
            </div>
            <ol class="breadcrumb">
                <li><a href="/">首页</a></li>
                <li class="active">账户余额</li>
            </ol>
        </div>

        <div class="page box_white">
            <div class="cell">
                <p class="c9">当前账户余额</p>
                <div class="balance_area" style="font-size: 24px; line-height: 24px;">
                    {{if .me.Gold}}
                    {{.me.Gold}} <img src="/static/img/gold_48.png" alt="" width="16px">
                    {{end}}
                    {{if .me.Silver}}
                    {{.me.Silver}} <img src="/static/img/silver_48.png" alt="" width="16px">
                    {{end}}
                    {{.me.Copper}} <img src="/static/img/copper_48.png" alt="" width="16px">
                </div>
            </div>
            {{if gt .total .cmt_per_num}}
            <div class="cell balance-page">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tbody>
                        <tr>
                        {{with $pageMax := divide .total .cmt_per_num}}
                            <td width="92%" align="left">
                            {{range $i, $v := genList $.total $.cmt_per_num}}
                                {{if gt $pageMax 20}}
                                    {{if lt $i 10}}
                                        <a href="/balance?p={{$v}}" class="{{if eq $v $.cur_p}}page_current{{else}}page_normal{{end}}">{{$v}}</a>
                                    {{else if gt $i (sub $pageMax 11)}}
                                        <a href="/balance?p={{$v}}" class="{{if eq $v $.cur_p}}page_current{{else}}page_normal{{end}}">{{$v}}</a>
                                    {{else if eq $i 11}}
                                    <a href="#" class="page_normal disable_now">...</a>
                                    {{end}}
                                {{else}}
                                    <a href="/balance?p={{$v}}" class="{{if eq $v $.cur_p}}page_current{{else}}page_normal{{end}}">{{$v}}</a>
                                {{end}}
                            {{end}}
                                <input type="number" class="page_input" autocomplete="off" value="{{$.cur_p}}" min="1" max="{{$pageMax}}">
                            </td>
                            <td width="8%" align="right">
                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tbody>
                                        <tr data-cur="{{$.cur_p}}" data-max="{{$pageMax}}">
                                            <td width="50%" align="center" class="super normal button nav-page prev-page {{if eq $.cur_p 1}}disable_now{{end}}" style="border-right: none;" title="上一页">❮</td>
                                            <td width="50%" align="center" class="super normal_page_right button nav-page next-page {{if eq $.cur_p $pageMax}}disable_now{{end}}" title="下一页">❯</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            {{end}}
                        </tr>
                    </tbody>
                </table>
            </div>
            {{end}}
            <div>
                <table cellpadding="5" cellspacing="0" border="0" width="100%" class="data table-hover">
                    <tr>
                        <th width="130" class="h">时间</th>
                        <th width="100" class="h">类型</th>
                        <th width="60" class="h">数额</th>
                        <th width="60" class="h">余额</th>
                        <th width="auto" class="h" style="border-right: none;">描述</th>
                    </tr>
                    {{range .details}}
                    <tr>
                        <td class="d"><small class="c9">{{.CreatedAt}}</small></td>
                        <td class="d">{{.TypeShow}}</td>
                        <td class="d" style="text-align: right;">
                            <span class="{{if gt .Num 0}}positive{{else}}negative{{end}}"><strong>{{.Num}}</strong></span>
                        </td>
                        <td class="d" style="text-align: right;">{{.Balance}}</td>
                        <td class="d" style="border-right: none;"><span class="c9">{{noescape .Desc}}</span></td>
                    </tr>
                    {{end}}
                </table>
            </div>
        </div>

        <div class="page box_white" style="margin-top: 20px;">
            <div class="cell">
                发布主题前，请仔细阅读 <a class="btn btn-default btn-sm" href="/markdown">Markdown 教程</a>，能让你的帖子有更加清晰的排版！
            </div>
        </div>

        {{if not .details}}
        <div class="page box_white" style="margin-top: 20px;">
            <div class="cell">
                <div class="header">可完成的任务</div>
                <div class="inner_content">
                    <h2>获得初始资本</h2>
                    欢迎来到 {{.setting.Name}}，这是一个关于分享、探索和学习成长的社区。你在进入这里时，你会获得 2000 铜币。接下来你在社区内的一切行为，包括创建主题和回复等，都将会消耗铜币。而当你完成了一些有意义的事情时，你就会收获铜币，以及，好心情。<strong>请优先发布内容在 <font color="red">主题</font> 中</strong>，发布自己的原创文章可以选择发布在文章中，否则可能会被<font color="red">扣除铜币</font>！
                    <div class="sep20"></div>
                    <strong>任务奖励</strong>
                    <div class="sep10"></div>
                    <div class="balance_area" style="">20 <img src="/static/img/silver_48.png" alt="" width="16px"> </div>
                    <div class="sep20"></div>
                    <a class="btn btn-default btn-sm" href="/mission/complete/1">完成任务</a>
                </div>
                <div>
                    建议关注 Go语言中文网 公众号，可以领取 <span style="color:red;">语言全套学习资料</span><img src="{{.static_domain}}/static/img/wx_sg_qrcode.jpg?imageView2/2/w/280" alt="关注微信" class="img-responsive">
                </div>
            </div>
        </div>
        {{end}}
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="sep20"></div>
        
        {{include "common/my_info.html" .}}

        {{include "sidebar/concern.html" .}}
    </div>
</div>
{{end}}
{{define "css"}}
<link rel="stylesheet" type="text/css" href="{{.static_domain}}/static/dist/css/table_data.min.css">
<style type="text/css">
.balance-page { background-image: url('/static/img/shadow_light.png'); background-size: 20px 20px; background-repeat: repeat-x; }
.positive { color: #0aa31c; }
.negative { color: #ff3c00; }
.nav-page { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
</style>
{{end}}
{{define "js"}}
<script>
$(function(){
    $('.prev-page').on('click', function() {
        let curPage = $(this).parent().data('cur');
        if (curPage > 1) {
            location.href='/balance?p='+(curPage-1);
        }
    });

    $('.next-page').on('click', function() {
        let curPage = $(this).parent().data('cur'),
            pageMax = $(this).parent().data('max');
        if (curPage < pageMax) {
            location.href='/balance?p='+(curPage+1);
        }
    });

    $('.nav-page').on('mouseover', function() {
        if (!$(this).hasClass('disable_now')) {
            $(this).addClass('hover_now');
        }
    });

    $('.nav-page').on('mouseleave', function() {
        if (!$(this).hasClass('disable_now')) {
            $(this).removeClass('hover_now');
            $(this).removeClass('active_now')
        }
    });

    $('.nav-page').on('mousedown', function() {
        if (!$(this).hasClass('disable_now')) {
            $(this).addClass('active_now');
        }
    });

    $('.page_input').on('keydown', function() {
        if (event.keyCode == 13) {
            location.href = '/balance?p=' + this.value
        }
    });
});
</script>
{{end}}
